<div nz-row [nzGutter]="24" style="height: 100%">
  <div nz-col [nzSpan]="18" style="display: flex; flex-direction: column">
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8">
        <nz-card>
          <app-area-chart></app-area-chart>
        </nz-card>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-card style="height: 100%">
          <app-area-chart></app-area-chart
        ></nz-card>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-card style="height: 100%">
          <app-area-chart></app-area-chart
        ></nz-card>
      </div>
    </div>
    <nz-card style="margin-top: 24px; flex: 1">
      <nz-table
        nzShowSizeChanger
        [nzData]="listOfRandomUser"
        [nzFrontPagination]="false"
        [nzLoading]="loading"
        [nzTotal]="total"
        [nzPageSize]="pageSize"
        [nzPageIndex]="pageIndex"
        (nzQueryParams)="onQueryParamsChange($event)"
        [nzScroll]="{ y: '240px' }"
      >
        <thead>
          <tr>
            <th nzColumnKey="name" [nzSortFn]="true">Name</th>
            <th
              nzColumnKey="gender"
              [nzFilters]="filterGender"
              [nzFilterFn]="true"
            >
              Gender
            </th>
            <th nzColumnKey="email" [nzSortFn]="true">Email</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of listOfRandomUser">
            <td>{{ data.name.first }} {{ data.name.last }}</td>
            <td>{{ data.gender }}</td>
            <td>{{ data.email }}</td>
          </tr>
        </tbody>
      </nz-table>
    </nz-card>
  </div>
  <div nz-col [nzSpan]="6">
    <nz-card style="height: 100%">
      <nz-timeline>
        <nz-timeline-item nzColor="green"
          >Create a services site 2015-09-01</nz-timeline-item
        >
        <nz-timeline-item nzColor="green"
          >Solve initial network problems 2015-09-01</nz-timeline-item
        >
        <nz-timeline-item nzColor="red">
          <p>Solve initial network problems 1</p>
          <p>Solve initial network problems 2</p>
          <p>Solve initial network problems 3 2015-09-01</p>
        </nz-timeline-item>
        <nz-timeline-item>
          <p>Technical testing 1</p>
          <p>Technical testing 2</p>
          <p>Technical testing 3 2015-09-01</p>
        </nz-timeline-item>
        <nz-timeline-item nzColor="gray">
          <p>Technical testing 1</p>
          <p>Technical testing 2</p>
          <p>Technical testing 3 2015-09-01</p>
        </nz-timeline-item>
        <nz-timeline-item nzColor="gray">
          <p>Technical testing 1</p>
          <p>Technical testing 2</p>
          <p>Technical testing 3 2015-09-01</p>
        </nz-timeline-item>
      </nz-timeline>
    </nz-card>
  </div>
</div>
